<template>
  <div class="main">
    <section>
      <el-form class="search-block" :model="listQuery" label-position="right" label-width="96px">
        <el-row type="flex">
          <el-col :span="6" style="margin-right:10px">
            <el-form-item label="等级ID">
              <el-input v-model="listQuery.targetId" placeholder="请输入id" clearable @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-right:10px">
            <el-form-item label="等级名称">
              <el-input v-model="listQuery.targetName" placeholder="请输入等级名称" clearable @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-right:10px">
            <el-form-item label="操作人">
              <el-input v-model="listQuery.operatorName" placeholder="请输入姓名" clearable @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="margin-right:10px">
            <el-form-item label="操作时间">
              <el-date-picker
                v-model="rangeTime"
                width="300px"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00','23:59:59']"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="medium" plain @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table ref="multipleTable" v-loading="listLoading" :data="list" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="等级id" prop="targetId"></el-table-column>
        <el-table-column align="center" label="等级名称" prop="targetName"></el-table-column>
        <el-table-column align="center" label="操作动作" prop="content"></el-table-column>
        <el-table-column align="center" label="操作时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.operateTime, 'YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人" prop="operatorName"></el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </section>
  </div>
</template>
<script>
export default {
  name: 'newBoxOperate',
  data() {
    return {
      listQuery: {
        targetId: '',
        targetName: '',
        operatorName: '',
        operateEndTime: '',
        operateStartTime: '',
        pageNo: 1,
        pageSize: 10
      },
      rangeTime: [], // 时间
      listLoading: false,
      list: [],
      listTotal: 0, // 总条数
      dialogTitle: '',
      multiSelectList: [], // 多选
      applyFail: {
        reason: ''
      },
      btnDisabled: false,
      coverMap: '' // 封面图
    }
  },
  created() {
    this.getList()
  },
  methods: {
    search() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      if (this.rangeTime) {
        if (this.rangeTime.length > 0) {
          this.listQuery.operateStartTime = this.rangeTime[0]
          this.listQuery.operateEndTime = this.rangeTime[1]
        } else {
          this.listQuery.operateStartTime = ''
          this.listQuery.operateEndTime = ''
        }
      } else {
        this.listQuery.operateStartTime = ''
        this.listQuery.operateEndTime = ''
      }
      this.request({
        url: '/bsnl-product/box/privilege-commission-config/operate-log/list',
        method: 'get',
        params: this.listQuery
      }).then((res) => {
        this.list = res.data
        this.listTotal = res.totalCount
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    // 拿到表格的数据
    handleSelectionChange(val) {
      this.multiSelectList = val
    },
    // 更改封面图
    editUpvideoImg(res, file) {
      this.coverMap = URL.createObjectURL(file.raw)
    }
  }
}
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
    .resourceImg{
        width: 60px;
        height: 60px;
    }
    .el-col-3 {
        margin-right: 10px;
    }
    #auditDialog {
      .resource_img{
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 10px;
      }
      .el-dialog__body{
        padding:25px 0px 30px;
      }
      .el-form{
        width: 100%;
        font-size:60px;
      }
      .singleAuditContent{
        @include scrollbar(8);
        height: 350px;
        overflow-y: scroll;
      }
      .bodyBottom{
        border-top: 1px solid #909399;
        padding-top: 22px;
        .avatar-uploader .el-upload{
          width: 60px;
          height: 60px;
        }
        #upvideo_img{
          width: 60px;
          height: 60px;
        }
      }
      .batchAuditContent{
        margin: 0px 30px;
        li{
          margin-top: 20px;
          border-bottom: 1px solid#909399;
          &:first-child{
            margin-top: 0px;
          }
          &:last-child{
            border-bottom: none;
          }
          p{
            margin-bottom: 10px;
            font-size: 16px;
          }
          .batchAuditImg{
            img{
              width: 60px;
              height: 60px;
            }
          }
          .el-icon-circle-close{
            color: red;
            font-size: 22px;
            margin-left: 10px;
          }
          .el-row{
            margin-bottom: 20px;
          }
        }
      }
    }
</style>
